<template>
	<div class="boxall" style="padding: 0 0.2rem 0.4rem 0.15rem; height: 3.4rem">
		<div class="pos_r">
			<div class="pos_a cut_btn dflex_vertical_c">
				<el-button size="mini" class="h100 dflex_vertical_c" :class="{ active: alarmState == '待付款' }"
					@click="alarmBtn('待付款')" round>待付款</el-button>
				<el-button size="mini" class="h100 dflex_vertical_c" :class="{ active: alarmState == '待发货' }"
					@click="alarmBtn('待发货')" round>待发货</el-button>
				<el-button size="mini" class="h100 dflex_vertical_c" :class="{ active: alarmState == '待收货' }"
					@click="alarmBtn('待收货')" round>待收货</el-button>
				<el-button size="mini" class="h100 dflex_vertical_c" :class="{ active: alarmState == '待评价' }"
					@click="alarmBtn('待评价')" round>待评价</el-button>
				<el-button size="mini" class="h100 dflex_vertical_c" :class="{ active: alarmState == '已完成' }"
					@click="alarmBtn('已完成')" round>已完成</el-button>
			</div>
		</div>
		<div class="allnav" style="margin-top: 0.5rem;">
			<table class="w100" cellspacing="0">
				<tr>
					<td>商品</td>
					<td>金额</td>
					<td>状态</td>
					<td>时间</td>
				</tr>
			</table>

			<div style="
	                overflow: hidden;
	                overflow-y: auto;
	                height: 2.2rem;
	            " v-loading="tableLoading" element-loading-text="加载中 · · ·" element-loading-background="rgba(4, 6, 51)">
				<table v-show="tableDatas && tableDatas.length > 0" class="w100 inner_table" ref="alarm_table"
					cellspacing="0">
					<tr v-for="(item, i) in tableDatas" :key="i">
						<td>
							<div>{{ item.name }}</div>
						</td>
						<td>{{ item.money }}</td>
						<td>{{ item.state }}</td>
						<td>{{ item.time }}</td>
					</tr>
				</table>

				<div v-show="!(tableDatas && tableDatas.length > 0)" class="dflex_c h100">
					<div class="fff">暂无数据！</div>
				</div>
			</div>
		</div>
		<div class="boxfoot"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				alarm_table: null,
				parentHeight: 0,
				tdHeight: 0,
				marginTop: 0,
				alarm_type: '',
				alarmState: '',
				tableDatas: [],
				tableLoading: true
			};
		},
		methods: {
			table() {
				if (this.alarm_table) return;
				this.alarm_table = document.querySelector('.inner_table');
				this.parentHeight = this.alarm_table.parentElement.clientHeight;
				this.tdHeight = this.alarm_table.querySelector('tr').clientHeight;
				let mouseIn = false;

				this.alarm_table.onmouseover = () => {
					mouseIn = true;
				};
				this.alarm_table.onmouseout = () => {
					mouseIn = false;
				};
				setInterval(() => {
					if (mouseIn) return;

					this.alarm_table.style.marginTop = this.marginTop + 'px';

					if (Math.abs(this.marginTop) > this.alarm_table.clientHeight - this.parentHeight) {
						this.marginTop = 0;
					} else {
						this.marginTop -= this.tdHeight;
					}
				}, 2000);
			},
			alarmBtn(data) {
				this.tableLoading = true;
				this.alarmState = data == this.alarmState ? '' : data;
				this.getTable();
				this.marginTop = 0;
			},
			async getTable() {
				let obj = {
					is_delete: 0,
					state: this.$db.$cmd.neq('已取消')
				};
				if (this.alarmState) {
					obj.state = this.alarmState;
				}

				const res1 = this.$db['wmzmall-order']
					.collection()
					.where(obj)
					.orderBy('create_time desc')
					.limit(30)
					.get();

				let res = {
					code: 0,
					datas: []
				};

				await Promise.all([res1]).then(resData => {
					resData[0].result.data.forEach(x => {
						x.order_info = x.order_info.substr(0, 6);
						x.create_time = new Date(x.create_time).format('yyyy-MM-dd');
						res.datas.push({
							name: x.order_info,
							money: x.order_actural_paid / 100,
							state: x.state,
							time: x.create_time
						});
					});
				}).catch(() => {
					this.tableLoading = false;
				})

				this.tableLoading = false;

				this.tableDatas = res.datas || [];

				setTimeout(() => {
					this.table();
				}, 1000);
			}
		},
		mounted() {
			window.addEventListener('resize', () => {
				this.marginTop = 0;

				this.alarm_table = document.querySelector('.inner_table');
				this.parentHeight = this.alarm_table.parentElement.clientHeight;
				if (this.alarm_table.querySelector('tr')) {
					this.tdHeight = this.alarm_table.querySelector('tr').clientHeight;
				}
			});

			this.getTable();
		},
		created() {
			uni.$on('biRefresh', () => {
				this.getTable();
				this.tableLoading = false;
			});
		}
	};
</script>

<style>
	::-webkit-scrollbar {
		width: 1px !important;
		height: 1px !important;
	}

	>>>.el-loading-spinner .el-loading-text {
		color: #fff;
	}

	>>>.el-loading-spinner .path {
		stroke: #02a6b5;
	}

	table td {
		padding: 10px;
		font-size: 0.17rem;
		color: rgba(255, 255, 255, 0.6);
		border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
		padding: 10px 0;
		text-align: center;
		display: inline-block;
	}

	table td:nth-child(1) {
		width: 30%;
	}

	table td:nth-child(2) {
		width: 20%;
	}

	table td:nth-child(3) {
		width: 25%;
	}

	table td:nth-child(4) {
		width: 25%;
	}

	.inner_table {
		transition: all 0.5s;
	}

	.inner_table tr {
		display: flex;
		padding: 0 5px;
	}

	.inner_table tr:hover {
		box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
		cursor: pointer;
		background-color: #0b1340;
	}
</style>
